<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			
			<div class="left">
				<model-dialog :modelUrl="modelUrl"></model-dialog>
				<div class="content">
					<div class="personal-wrap">
						<div class="personal">
							<img :src='staticURL+modelInfo.headimg' v-if='modelInfo.headimg' class='bg_logo'/>
							<img src="@/assets/img/user-logo.png" class='bg_logo' v-else/>
							<div>
								<p>{{modelInfo.realname}}</p>
								<span>创作日期：{{modelInfo.create_time}}</span>
							</div>
						</div>
						<span class="art-style">艺术风格：{{modelInfo.styleName}}</span>
					</div>
					
					<!-- 模型信息 -->
					<div class="prompt-wrap mgb-15">
						<h1>提示词</h1>
						<div class="textarea-wrap">
							<textarea placeholder="描述你想要生成的物体，如火星。" rows="4" readonly v-model="modelInfo.name"></textarea>
						</div>
					</div>	
					
					<div class="prompt-wrap mgb-15">
						<h1>反面提示词</h1>
						<div class="textarea-wrap">
							<textarea placeholder="描述你想要生成的物体，如火星。" rows="4"  readonly v-model="modelInfo.negative_prompt"></textarea>
						</div>
					</div>
				</div>
			</div>

			<div class="right">
				<!-- 点评信息 -->
				
				<div class="comment-info">
					<p>作品点评</p>
					<div class="content">
						<div>作品级别</div>
						<span :class="commentData.level == 3 ? 'active' : ''" @click="changeLevel(3)">校级优秀</span>
						<span :class="commentData.level == 2 ? 'active' : ''" @click="changeLevel(2)">班级优秀</span>
						<span :class="commentData.level == 1 ? 'active' : ''" @click="changeLevel(1)">合格</span>
					</div>
					<span class="tips">校级、班级优秀作品将公开到模型广场，合格作品将不会公开</span>
				</div>
				
				<div class="model-type">
					<p>模型类型</p>
					<el-select
						class="form-s"
						v-model="commentData.model_type"
						clearable
						placeholder="请选择模型类型">
						<el-option
						  v-for="item in tabList"
						  :key="item"
						  :label="item"
						  :value="item">
						</el-option>
					</el-select>
				</div>
				
				<div class="opinion-info">
					<p>意见</p>
					<textarea rows="3" cols="20" placeholder="请输入点评意见" v-model="commentData.comment"></textarea>
				</div>
				
				<div v-show='commentData.level == 2 || commentData.level == 3' class="refine-wrap">
					<p class="tips">当前模型为初级模型，不够清晰，建议精炼模型：</p>
					<div>
						<span class="integral-label">预计耗时</span>
						<span class="integral-value">5分钟</span>
					</div>
				
					<div>
						<span class="integral-label">消耗积分</span>
						<span class="integral-value">30积分</span>
					</div>
				</div>
				
				<div class="btn_wrap">
					<span v-show='commentData.level == 2 || commentData.level == 3' class="btn"
						@click="handleRefine">生成高清模型并完成点评</span>
					<span v-show='!(commentData.level == 2 || commentData.level == 3)' class="btn"
						@click="handleSubmit">确定</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as THREE from "three";
	import {
		GLTFLoader
	} from "three/examples/jsm/loaders/GLTFLoader.js";
	import {
		OrbitControls
	} from "three/examples/jsm/controls/OrbitControls";
	import utils from '@/assets/js/utils';
	import {
		getModelDetail,
		modelComment,
		getModelTypeList
	} from '@/api/model.js';
	import modelDialog from './modelDialog';
	export default {
		props: {
			model_id: {
				type: [String, Number],
				default: ""
			},
		},
		components:{
			modelDialog
		},
		data() {
			return {
				commentData: {
					model_id: "",
					model_type:'',
					level: "",
					comment: ""
				},
				camera: null,
				scene: null,
				renderer: null,
				modelUrl: "",
				typeList: [{
						name: "智能",
						key: "auto"
					},
					{
						name: "写实",
						key: "realistic"
					},
					{
						name: "卡通",
						key: "cartoon"
					},
					{
						name:"雕塑",
						key:"sculpture"
					}
				],
				tabList:[],
				modelInfo: {}
			}
		},

		created() {
			if (this.model_id) {
				this.getModelTypeList();
				this.getModelDetail()
			}
		},

		methods: {
			async getModelTypeList() {
				const {
					data,
					status
				} = await getModelTypeList();
				if (status !== 200) return;
				if(data.code == 200){
					this.tabList = data?.data?.info || [];
				}
				else{
					this.tabList = [];
					this.$message.warning(data && data.message || '获取数据失败');
				}
			},
			initModel() {
				const width = this.$refs.threeContainer.clientWidth;
				const height = this.$refs.threeContainer.clientHeight;
				// 创建场景
				this.scene = new THREE.Scene();
				// 添加相机
				this.camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 3000);
				this.camera.position.z = 1;
				this.camera.lookAt(0, 0, 0)
				// 创建渲染器
				this.renderer = new THREE.WebGLRenderer({
					antialias: true,
					alpha: true
				});
				this.renderer.setSize(width, height);
				this.renderer.setClearColor(0x000000, 0);
				this.$refs.threeContainer.appendChild(this.renderer.domElement);
				const loader = new GLTFLoader(); // 加载3D模型
				loader.load(this.modelUrl, (gltf) => {
						gltf.scene.traverse(function(child) {
							if (child.isMesh) {
								child.material.emissive = child.material.color;
								child.material.emissiveMap = child.material.map;
							}
						});
						this.scene.add(gltf.scene);
					},
					(xhr) => {
						console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
					},
					(error) => {
						console.error(error);
					})
				//添加控制器
				let controls = new OrbitControls(this.camera, this.renderer.domElement);
				controls.addEventListener("change", () => {
					this.renderer.render(this.scene, this.camera);
				});
			},

			animate() {
				requestAnimationFrame(this.animate);
				this.renderer.render(this.scene, this.camera);
			},

			async getModelDetail() {
				const obj = {
					model_id: this.model_id
				};
				const {
					data,
					status
				} = await getModelDetail(obj);
				if (status !== 200) return;
				if (data.code == 200 && data.data) {
					this.modelInfo = data.data.info || {};
					this.modelUrl = this.modelInfo.glbUrl;
					this.modelInfo.negative_prompt = this.modelInfo.negative_prompt || "无";
					this.modelInfo.styleName = this.typeList.find(ele => ele.key == this.modelInfo.style)?.name;
					if (this.modelUrl) {
						this.initModel();
						this.animate();
					}
				} else {
					this.modelInfo = {};
					this.$message.warning(data && data.message || '登录失败');
				}
			},
			
			handleRefine(){
				let content = '成功添加高清模型精炼任务，精炼模型预计耗时5分钟，为了不占用您的宝贵时间，系统将在后台自动完成，可在学生作品-已点评中查看进度';
				this.$confirm(content, '提示', {
					confirmButtonText: '我知道了',
					showCancelButton:false,
					showClose:false,
					customClass:"text-message"
				}).then(() => {
					this.handleSubmit()
				}).catch(() => {
					
				});
			},

			async handleSubmit() {
				this.commentData.model_id = this.model_id;
				if (!this.commentData.level) {
					this.$message("请选择作品级别");
					return
				}
				const {
					data,
					status
				} = await modelComment(this.commentData);
				if (status !== 200) return;
				if (data.code == 200) {
					this.$message.success("点评完成");
					this.close()
				} else {
					this.$message.warning("点评失败");
				}
			},
			
			changeLevel(level){
				this.commentData.level = level;
			},
			close() {
				vm.isLoading = false;
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 1200px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid #CCCCCC;
			display: flex;
			justify-content: space-between;
			overflow: auto;
			.left {
				width: 50%;
				.model-content{
					height:300px;
				}
				.content{
					padding: 15px 15px 0 15px;
					.personal-wrap{
						@include flex-row;
						justify-content: space-between;
						.personal{
							@include flex-row;
							img{
								display: block;
								width: 60px;
								height: 60px;
								border-radius: 50%;
								margin-right: 15px;
							}
							p{
								margin-bottom: 4px;
								font-size: 16px;
								color: #333333;
							}
							span{
								font-size: 12px;
								color: #999999;
							}
						}
						.art-style{
							font-size: 14px;
							color: #333333;
						}
					}
					@include prompt-wrap;
					h1{
						@include font-style;
						font-size: 16px;
						color: #333333;
						margin-bottom: 15px;
						position: relative;
						span{
							color:#FFC267
						}
					}
				}
			}

			.right {
				padding: 30px;
				width: 50%;
				overflow: auto;
				.tips{
					font-size: 12px;
					color: #999999;
				}
				.comment-info{
					margin: 20px 0;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					.content{
						margin-bottom: 18px;
						@include flex-row;
						div{
							margin-right: 16px;
							font-size: 12px;
							color: #999999;
						}
						span{
							@include cursor-style;
							margin-right: 12px;
							font-size: 12px;
							color: #333333;
							padding-left:24px;
							background:url("../../../assets/img/gou.png") no-repeat left center;
							background-size: 20px 20px;
						}
						.active{
							background:url("../../../assets/img/gou-active.png") no-repeat left center;
							background-size: 20px 20px;
						}
					}
				}
				
				.opinion-info{
					margin-bottom: 20px;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					textarea{
						width: 100%;
						height: 120px;
						padding: 10px 15px;
						background: #F0F3F4;
						border-radius: 10px 10px 10px 10px;
						border: 1px solid #CFDDE1;
					}
				}
				
				.refine-wrap {
					margin-bottom: 20px;
					p {
						margin-bottom: 10px;
					}
				
					div {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 4px;
						span {
							@include font-style;
							font-size: 14px;
						}
						.integral-label{
							color: #666666;
						}
						.integral-value{
							color: #333333;	
						}
					}
				}
				
				.btn_wrap {
					text-align: center;
					margin-top: 20px;
					.btn {
						display: inline-block;
						width: 100%;
						height: 50px;
						line-height: 50px;
						text-align: center;
						background: #FFC267;
						border-radius: 5px 5px 5px 5px;
						font-size: 16px;
						color: #FFFFFF;
						@include cursor-style;
					}
				}
				.model-type{
					margin: 20px 0;
					p{
						margin-bottom: 18px;
						font-size: 16px;
						color: #333333;
					}
					.form-s{
						width: 82%;
						height: 44px;
						
						:deep(input){
							height: 44px;
							line-height: 44px;
							background: #F0F3F4;
							border: 1px solid #CFDDE1;
						}
						:deep(.el-tag--mini){
							height: 26px;
							line-height: 26px;
						}
					}
				}
				
				
			}

			.close {
				position: absolute;
				right: 40px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
		}
	}

	
</style>
<style>
	.text-message{
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		padding-bottom: 30px;
		.el-message-box__header{
			padding: 30px 20px 0 20px;
			.el-message-box__title{
				font-weight: 500;
				font-size: 18px;
				color: #333333;
			}
		}
		.el-message-box__content{
			padding: 20px 20px 16px 20px;
			.el-message-box__message{
				color: #666;
			}
		}
		
		
		button{
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 0;
			border-radius: 5px;
		}
	}
</style>